<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="agate.css">
</head>

<body>
    <div class="main">
        <textarea name="" cols="30" rows="5">var a = 'hello world!';</textarea><br>
        <input type="button" value="添加代码">
    </div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script src="https://apps.bdimg.com/libs/behave.js/1.5.0/behave.js"></script>
<script>
    let $ = document.querySelector.bind(document);
    let editor = new Behave({
        textarea: $('.main textarea'),
        replaceTab: true,
        softTabs: true,
        tabSize: 2,
        autoOpen: true,
        overwrite: true,
        autoStrip: true,
        autoIndent: true,
        fence: false
    });

    $('input[type="button"]').addEventListener("click", () => {
        let $code = document.createElement("div");
        $code.innerHTML = '' +
            '<div>' +
            '<pre class="javascript">' +
            '</pre>' +
            '<i class="iconfont icon-clipboard" title="复制到剪贴板"></i>' +
            '<i class="iconfont icon-delete" title="删除"></i>' +
            '</div>',
            $txt = $('.main textarea');

        if ($txt.value !== '') {
            $code.querySelector('pre').innerHTML = $txt.value;
            hljs.highlightBlock($code.querySelector('pre'));
            $('.main').appendChild($code);
        }


    });
</script>

</html>